<template>
  <div>
    <el-table
      :data="myList"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="roomNo" label="会议室"> </el-table-column>
      <el-table-column prop="startTime" label="开始时间">
        <template #default="{ row }">
          <span
            :style="{
              color: row.endTime ? 'rgb(98, 52, 204)' : 'rgb(98, 52, 204)',
            }"
            >{{ row.startTime + ":00" }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间">
        <template #default="{ row }">
          <span
            :style="{
              color: row.endTime ? 'rgb(98, 52, 204)' : 'rgb(98, 52, 204)',
            }"
            >{{ row.endTime + ":00" }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="date" label="会议日期"> </el-table-column>
      <el-table-column prop="endDate" label="会议结束日期"> </el-table-column>

      <el-table-column label="dialog">
        <template #default="{ row }">
          <el-button type="primary" @click="handleSave(row.id)">删除</el-button>
        </template>
        <!-- <template #default="{row}">
        
      <el-button type="button" @click="dialogFormVisible = true" >删除</el-button>
     
      <el-dialog title="请确认要删除这一纪录吗？" :visible.sync="dialogFormVisible"  @closed="dialogFormVisible = false" append-to-body > 
     
      <div slot="footer" class="dialog-footer">
        
       
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary"  @click="handleSave(row)">确 定</el-button>
        
     </div>   
    </el-dialog>

    </template> -->
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      dialogCode: true,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      userid: "",
      id: 1,
      myList: [
        {
          roomNo: 601,
          startTime: 9,
          endTime: 10,
          date: "2022-04-25",
          endDate: "2022-04-25",
          id: 1,
        },
        {
          roomNo: 601,
          startTime: 9,
          endTime: 11,
          date: "2022-04-26",
          endDate: "2022-04-26",
          id: 2,
        },
        {
          roomNo: 601,
          startTime: 8,
          endTime: 12,
          date: "2022-04-28",
          endDate: "2022-04-28",
          id: 3,
        },
      ],
    };
  },

  mounted() {},

  methods: {
    handleClose() {},

    async handleSave(id) {
      console.log(id);
      this.id = id;
      const { data: res } = await this.axios.post("deleteOne", this.id);
      //  axios({
      //    url:"deleteOne",
      //    data:this.id1,
      //    contentType:"application/json"

      //  }).then((res) =>{

      //  })
      if (res.flag == "1") {
        this.$message.success("操作成功");
      } else {
        this.$message.error("删除失败");
      }

      /*   setTimeout(() => {
        location.reload();
      }, 1000); */

      this.dialogFormVisible = false;
    },

    //获取用户id
         getuserid() {
      let user = window.sessionStorage.getItem("access-token");
      const user1 = JSON.parse(user);
      this.userid = user1.userid;
    },

    //获取我的预定信息
        async  getMyList(){
        const {data:res} = await this.axios.post('mylist',this.userid);
        if(res.flag == '200') {
          if(res.num>0){
            this.myList = res.data
          }
        }
     },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
  },
  created(){
    this.getuserid();
  }
};
</script>
<style >
.el-table .warning-row {
  background: rgb(219, 212, 200);
}

.el-table .success-row {
  background: #cbd6c5;
}
</style>